<template>
  <div class="send">
    <div class="emoji">
      <van-icon class="emoji-icon" name="smile-o"></van-icon>
    </div>
    <div :class="hasContent ?  'input-box' : 'input-box-full' ">
      <textarea name="msg" class="input" @input="inputChange" />
    </div>
    <div class="send-button" v-if="hasContent">
      <van-button type="success" icon="share-o" class="send-btn" ></van-button>
    </div>
    <div class="clear"></div>
  </div>
</template>
<script>
  import { ref } from "vue"
  export default {
    name : 'SendBox',
    setup(){
      let hasContent = ref(false)
      return {
        hasContent
      }
    },
    props : {
      
    },
    methods:{
      inputChange(e){
        const it = this
        let c = e.target.value
        if( c )  it.hasContent = true
        else it.hasContent = false
        
      }
    }
  }
</script>
<style scoped="">
  .send{
    min-height:50px;
    position: absolute;
    bottom:0px;
    left:0;
    width: 100%;
    background: #eee;
    border-top:1px solid #ddd;
    overflow-y: hidden;
  }
  .emoji{
    width: 50px;
    float : left;
    text-align: center;
    line-height: 60px;
    height: 50px;
    font-size: 30px;
    color: #666;
 
  }
  .emoji-icon{
    
  }
  .input-box{
    width: calc(100% - 120px);
    float: left;
    padding:5px 10px;
    /* transition:1s; */
  }
  .input-box-full{
    width: calc(100% - 50px);
    float: left;
    padding:5px 10px;
    /* transition:1s; */
  }
  .input{
    width : 100%;
    height : 40px;
    border:1px solid #ccc;
    border-radius: 16px;
    line-height: 40px;
    background: #fff;
    padding:0px 10px;
    display: block;
  }
  .send-button{
    float: right;
    width : 70px;
    padding:5px;
  }
  .send-btn{
    height : 40px;
    line-height: 40px;
  }
</style>